<script setup lang='ts'>
import carousel from "../components/pc/carousel.vue";
import content from "../components/pc/content.vue";
import facebookContent from "../components/pc/facebookContent.vue";
import myHeaderMete from "@/components/pc/myHeaderMete.vue";
import mitter from "../utils/mitt";
import { onMounted, ref } from "vue";
import { getData,getSimpleData } from "@/api/api";
import { useRoute } from "vue-router";
const quetyData = useRoute()
const data = ref()
const simpleData = ref()
onMounted(async()=>{
    const res = await getData()
    const SimpleData = await getSimpleData()
    data.value = res.data.data
    simpleData.value = SimpleData.data.data
    mitter.emit('thisId',{key:quetyData.query.id})
})
</script>

<template>
    <div class="content">
        <myHeaderMete title="业务预览"/>
        <carousel></carousel>
        <div class="hrTitle">
            <el-divider content-position="left"><div class="is-left">任务派单</div></el-divider>
        </div>
        <content :mydata="data" title="推荐" color="#3abc8f" text="推荐任务">
            <el-icon size="60" color="white">
                <BellFilled />
            </el-icon>
        </content>
        <content :mydata="simpleData" title="简易" color="#fb9354" text="简易任务">
            <el-icon size="60" color="white">
                <Eleme />
            </el-icon>
        </content>
        <div class="hrTitle">
            <el-divider content-position="left"><div class="is-left">账号交易</div></el-divider>
        </div>
        <facebookContent title="FB账号交易" color="#55a3f2" text="FB账号">
            <el-icon size="60" color="white">
                <ChromeFilled />
            </el-icon>
        </facebookContent>
        <div class="footer"></div>
    </div>
</template>

<style scoped>
.footer{
   height: 20px;
}
.content{
    background-color: #f5f5f5;
}
.hrTitle{
    width: 1300px;
    margin: auto;
}
.is-left {
    background-color: #f5f5f5;
    font-size: 14px;
    width: 60px;
    font-weight: 500;
    top: -10px;
    padding: 0px 20px;
    position: absolute;
    text-align: center;
}
</style>